<template>
  <s-layout title="购车排队" class="set-userinfo-wrap">

    <scroll-view
      class="scroll-box"
      scroll-y="true"
      :scroll-with-animation="false"
      :enable-back-to-top="true"
    >
      <view v-for="item in state.pagination.data" :key="item.id" class="queue-item-wrapper">
        <view class="queue-item">
          <view class="top">
            <image class="item-img"
                   :src="sheep.$url.cdn(item.order_item&&item.order_item[0]?item.order_item[0].goods_image:'')"
            />
            <view class="item-right">
              <view class="content-left">
                <view class="title">{{ item.order_item[0].goods_title }}
                </view>
                <view class="color">{{ item.order_item[0].goods_sku_text }}
                </view>
                <view class="code-wrapper">购车编号：
                  <view class="code">{{ item.car_sn }}</view>
                </view>
              </view>
              <view class="content-right">
                <view class="count-wrapper">
                  <!--                TODO 未发现对应字段-->
                  <view class="num">9</view>
                  位车主
                </view>
                <view class="wait">{{ item.status_text }}</view>
              </view>
            </view>
          </view>
          <view class="bottom">
            <view class="order">
            </view>
            <view class="btn">
              <my-btn mini @tap="handleCancel(item.id)">取消购车</my-btn>
            </view>
          </view>
        </view>

      </view>
      <uni-load-more
        v-if="state.pagination.total > 0"
        :status="state.loadStatus"
        :content-text="{
            contentdown: '上拉加载更多',
          }"
        @tap="loadmore"
      />
    </scroll-view>
  </s-layout>

</template>
<script setup>
  import { reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import _ from 'lodash';
  // 获取列表
  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
  });

  async function getList(page = 1, list_rows = 10) {
    state.loadStatus = 'loading';
    const res = await sheep.$api.user.getCarQueueList({
      list_rows,
      page,
    });
    if (res.code === 1) {
      let couponList = _.concat(state.pagination.data, res.data.data);
      state.pagination = {
        ...res.data,
        data: couponList,
      };
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }

  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getList(state.pagination.current_page + 1);
    }
  }

  // 上拉加载更多
  onReachBottom(() => {
    loadmore();
  });
  // 取消购车
  const handleCancel = async (id) => {
    uni.showModal({
      title: '提示',
      content: '确定要取消购车吗？',
      success: async function (res) {
        if (res.confirm) {
          const { code } = await sheep.$api.order.orderCancel({id});
          if (code === 1) {
            state.pagination = pagination
            getList();
          }
        }
      },
    });
  }
  onLoad(async (options) => {
    getList();
  });
</script>
<style scoped lang="scss">
  .queue-item-wrapper {
    padding: 0 30rpx;
    margin-bottom: 22rpx;

    .bottom {
      width: calc(100% - 60rpx);
      border-top: 2rpx solid #353535;
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #868686;
    }

    .queue-item {
      background: #1E1E1E;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;

      .top {
        display: flex;
        padding: 30rpx;
      }

      .item-img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 12rpx;
        margin-right: 30rpx;
      }

      .item-right {
        display: flex;
        justify-content: space-between;
        flex: 1;

        .content-left {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 24rpx;
          color: #B1B1B1;

          .title {
            font-size: 30rpx;
            color: #FFFFFF;
          }

          .code-wrapper {
            display: flex;
          }

          .code {
            color: #FFFFFF;
            font-size: 22rpx;
            width: 150rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .content-right {
          font-size: 22rpx;
          color: #B1B1B1;

          .count-wrapper {
            color: #FFFFFF;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;

            .num {
              font-size: 42rpx;
              color: #007AFF;
            }
          }
        }
      }
    }
  }
</style>
